<template>
  <div class="list-wrap">
    <a-typography-title class="block-title" :heading="6">
      {{ $t('cardList.tab.title.service') }}
    </a-typography-title>
    <a-row class="list-row" :gutter="24">
      <a-col v-for="item in renderData" :key="item.id" :xs="12" :sm="12" :md="12" :lg="6" :xl="6" :xxl="6" class="list-col" style="min-height: 162px">
        <CardWrap :loading="loading" :title="item.title" :description="item.description" :default-value="item.enable" :action-type="item.actionType" :expires="item.expires" :open-txt="$t('cardList.service.open')" :close-txt="$t('cardList.service.cancel')" :expires-text="$t('cardList.service.renew')" :tag-text="$t('cardList.service.tag')" :expires-tag-text="$t('cardList.service.expiresTag')" :icon="item.icon">
          <template #skeleton>
            <a-skeleton :animation="true">
              <a-skeleton-line :widths="['100%', '40%', '100%']" :rows="3" />
              <a-skeleton-line :widths="['40%']" :rows="1" />
            </a-skeleton>
          </template>
        </CardWrap>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import { queryTheServiceList, ServiceRecord } from '@/api/list';
import useRequest from '@/hooks/request';
import CardWrap from './card-wrap.vue';

const defaultValue: ServiceRecord[] = new Array(4).fill({});
const { loading, response: renderData } = useRequest<ServiceRecord[]>(queryTheServiceList, defaultValue);
</script>

<style scoped lang="less"></style>
